<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>FORM COMPONENT TEST</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.14.1/antd.min.css" integrity="sha512-GElOEG62hoWTO/9pNNVPBz+b9AELiVOuEEjM3h5jE5nVx+SVHRaKP/TjcJrwjkJC3CfnSK4clQ6l1jxmaeK9tg==" crossorigin="anonymous" />
    <script type="text/javascript" src="../../dist/index.web.js"></script>
    <script type="text/javascript">
      window.React = jsonx.__getReact();
      window.ReactDOM = jsonx.__getReactDOM();
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.14.1/antd.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      const defaultValues = {
        firstName: "bill",
        lastName: "luo",
        email: "bluebill1049@example.com"
      };
      const onSubmit = (formdata)=>{
        document.querySelector('#formResult').innerHTML=JSON.stringify(formdata,null,2)
      }
      const formComponent = {
        component:'div',
        children:[
          {
            component:'h1',
            children:'Basic Form'
          },
          {
            component:'label',
            props:{
              htmlFor:'firstName'
            },
            children:'First Name'
          },
          {
            component:'input',
            props:{
              placeholder:'John',
              name:'firstName',
              id:'firstName',
            },
            __dangerouslyEvalAllProps:function({jsonx}){
              return this.reactHookForm.register(jsonx.props.name)
            }
          },
          {
            component:'label',
            props:{
              htmlFor:'lastName'
            },
            children:'Last Name'
          },
          {
            component:'input',
            props:{
              placeholder:'Smith',
              name:'lastName',
              id:'lastName',
            },
            useformregister:true,
          },
          {
            component:'label',
            props:{
              htmlFor:'saveInfo'
            },
            children:'Save Info'
          },

          {
            component:'ReactHookForm.Controller',
            props:{
              name:'saveInfo',
              id:'saveInfo',
            },
            thiscontext:{
              control:['reactHookForm','control']
            },
            __dangerouslyInsertFunctionComponents:{
              render:{
                functionBody: `let exposeProps={}`,
                reactComponent:{
                  component:'antd.Switch',
                  props:{
                    name:'saveInfo',
                    id:'saveInfo',
                  },
                  __dangerouslyEvalAllProps:function({jsonx}){
                    const {reactHookForm} = this;
                    return {
                      ...jsonx.props.field,
                      id:'saveInfo',
                      name:'saveInfo',
                      checked: jsonx.props.field.value,
                      onChange(checked){
                        reactHookForm.setValue('saveInfo',checked)
                      }
                    }
                  }
                }
              }
            }
          },
          {
            component:'ReactHookForm.Controller',
            props:{
              id:'emailInput',
              addonBefore:'Email',
              name:'email',
              // type:'text',
            },
            thiscontext:{
              control:['reactHookForm','control']
            },
            __dangerouslyInsertFunctionComponents:{
              render:{
                reactComponent:{
                  component:'antd.Input',
                  props:{              
                    id:'emailInput',
                    addonBefore:'Email',
                    name:'email',
                  },
                  // __dangerouslyEvalAllProps:function({jsonx}){
                  //   const {reactHookForm} = this;
                  //   console.log('__dangerouslyEvalAllProps this',this,{jsonx,reactHookForm})
                  //   // console.log('__dangerouslyEvalAllProps arguments',jsonx.props.field)
                  //   return {
                  //     // ...jsonx.props.field,
                  //     id:'emailInput',
                  //     addonBefore:'Email',
                  //     name:'email',
                  //     ref: jsonx.props.field.ref,
                  //     value: jsonx.props.field.value,
                  //     devaultValue: jsonx.props.field.value,

                  //     onChange(event){
                  //       console.log('on change', {event})
                  //       reactHookForm.setValue('email',event.target.value)
                  //     },
                  //     onBlur(event){
                  //       console.log('on blur',{event})
                  //       reactHookForm.setValue('email',event.target.value)
                  //     }
                  //   }
                  //   // return jsonx.props.register(jsonx.props.name)
                  // }
                  thisprops:{
                    onChange:['field','onChange'],
                    onBlur:['field','onBlur'],
                    value:['field','value'],
                    name:['field','name'],
                    ref:['field','ref'],
                  },
                }
              }
            }
          },
          
          
         // */
         {
            component:'input',
            props:{
              id:'formSubmitButton',
              type:'submit',
            }
          },
          {component:'hr'},
          {
            component:'textarea',
            props:{id:'formResult', style:{width:'20rem',height:'10rem'}},
          }
        ]
      }
      const myFormComponent = jsonx._jsonxComponents.FormComponent.call({
          // disableRenderIndexKey:false,
          componentLibraries:{
            antd:window.antd,
          },  
        },
        {
          formComponent,
          name:'myFormComponent',
          hookFormOptions: {
            defaultValues,
          },
          onSubmit,
        })
      const boundConfig = {
        // disableRenderIndexKey:false,
        reactComponents:{
          myFormComponent,
        },
        componentLibraries:{
          antd:window.antd,
        },
      };
      jsonx.jsonxRender.call(boundConfig,{ 
        jsonx: {
          component:'Fragment',
          children:[
            {
              component:'myFormComponent',
            }
          ]
        }, 
        querySelector:'#root', });
    </script>
  </body>
</html>